<script lang='ts' setup>
import { ScrollbarInstance } from 'element-plus'


const messageList = ref<string[]>([])

onMounted(() => {
  window.electron.ipcRenderer.on('server:data-success', (_, message: string) => {
    messageList.value.push(message)
    scrollToBottom()
  })
  window.electron.ipcRenderer.on('server:data-error', (_, message) => {
    messageList.value.push(message)
    scrollToBottom()
  })
  window.electron.ipcRenderer.on('server:ready', () => {
    window.electron.ipcRenderer.send('application:open-main-window')
  })
})
onUnmounted(() => {
  window.electron.ipcRenderer.removeAllListeners('server:data-success')
  window.electron.ipcRenderer.removeAllListeners('server:data-error')
  window.electron.ipcRenderer.removeAllListeners('server:ready')
})

const innerRef = ref<HTMLDivElement>()
const scrollbarRef = ref<ScrollbarInstance>()
// 控制滚动条滚动到容器的底部
async function scrollToBottom() {
await nextTick()
const max = innerRef.value?.clientHeight
scrollbarRef.value?.setScrollTop(max!)
}
</script>

<template >
  <div class="loading-container">
    <div class="logo">
      <el-icon size="200" color="#fff">
        <IconPhCodeFill />
      </el-icon>
      <h1>加载中...</h1>
    </div>
    <div style="padding: 10px;">
      <el-scrollbar ref="scrollbarRef" height="280px" class="message-scroll-bar">
      <div ref="innerRef" class="message-wrapper">
        <div v-for="message in messageList" class="message">
          {{ message }}
        </div>
      </div>
      </el-scrollbar>
    </div>
  </div>
</template>

<style scoped lang='less'>
.loading-container {
  width: 100vw;
  height: 100vh;
  display: flex;
  background-color: var(--el-color-primary);

  .logo {
    width: 200px;
    height: 100vh;
    color: var(--el-color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-family: monospace;
  }

  .message-scroll-bar {
    width: calc(100vw - 200px - 20px);
    height: 280px;
    pointer-events: none;
    user-select: none;
    .message {
      white-space: pre-wrap;
      font-size: 12px;
      font-family: monospace;
      color: #fff;
    }
    :deep(.el-scrollbar__bar) {
      display: none !important;
    }
  }
}
</style>
